<template>
    <div id="app">
        <el-container>
            <el-header style="height: 90px">
                <div class="logo">
                    <img src="./assets/img/toplogo.png" alt/>
                </div>
                <el-menu
                        :default-active="defaultActive"
                        class="el-menu-demo"
                        mode="horizontal"
                        @select="handleSelect"
                        :router="router"
                >
                    <el-menu-item style="height:89px;line-height:90px" index="/">
                        首页
                    </el-menu-item>
                    <el-menu-item style="height: 89px;line-height:90px" index="/news">留学攻略</el-menu-item>
                    <el-menu-item style="height: 89px;line-height:90px" index="/product">留学问答</el-menu-item>
                    <el-menu-item style="height: 89px;line-height:90px" index="/case">考试培训</el-menu-item>
                    <el-menu-item style="height: 89px;line-height:90px" index="/login">测试1</el-menu-item>
                    <el-menu-item style="height: 89px;line-height:90px" index="/1">测试2</el-menu-item>
                    <el-menu-item style="height: 89px;line-height:90px" index="/2">测试3</el-menu-item>
                    <el-menu-item style="height: 89px;line-height:90px" index="/3">测试4</el-menu-item>

                </el-menu>

            </el-header>
            <banner style="margin:0 auto;text-align: center;width: 1800px;" img="../assets/img/bgtop.jpg"/>
            <el-main>
                <router-view/>
            </el-main>
        </el-container>
    </div>
</template>

<script>

    import Banner from "./components/Banner";

    export default {
        components: {
            Banner
        },
        data() {
            return {
                router: true,
                defaultActive: "/",
                isShow: false
            };
        },
        methods: {
            open_notice() {
                this.$notify({
                    title: '扫码添加微信咨询专业留学老师',
                    duration: 0,
                    showClose: false,
                    dangerouslyUseHTMLString: true,
                    position: 'bottom-right',
                    message: '<img style="width: 300px;height: 400px" src="http://byb-pic.oss-cn-shenzhen.aliyuncs.com/beyebe/data/20200823/c4515a3d7d7f79eab0d05a501bb6bb5f.jpg">'
                });
            },
            handleSelect(key) {
                this.isShow = this.defaultActive != key;
                window.console.log(this.isShow);
            }
        },
        mounted() {
            setTimeout(() => {
                this.open_notice()
            }, 500)
        }
    };
</script>

<style lang="scss">
    * {
        padding: 0;
        margin: 0;
    }

    html,
    body {
        height: 100%;
    }

    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #2c3e50;
    }

    .el-header {
        height: 90px;
        display: flex;
        /*justify-content: space-between;*/
        align-content: center;
        width: 1800px;
        margin: 0 auto;
        //background-color: #fff;
        .el-menu-item {
            font-size: x-large;
            margin: 0 30px;

        }

        .logo {
            width: 280px;
            padding: 10px;

            img {
                width: 100%;
                line-height: 60px;
            }
        }
    }

    .el-main {
        padding: 0 !important;
    }

    .footer {
        width: 100%;
        height: 216px;
        overflow: hidden;
        background-color: #14679f;

        &-content {
            width: 1800px;
            margin: 0 auto;
            padding-top: 20px;
            display: flex;
            justify-content: space-between;

            .content-nav {
                display: flex;
                justify-content: space-around;

                li {
                    display: flex;
                    flex-direction: column;
                    padding: 0 20px;
                    //justify-content: center;
                    align-items: flex-start;

                    p {
                        font-size: 20px;
                        color: #d4edff;
                        padding: 10px 0;
                    }

                    span {
                        color: #f7f7f7;
                        font-weight: 300;
                        padding: 5px 0;
                    }
                }
            }

            img {
                width: 170px;
                height: 170px;
                padding: 10px;
            }
        }

        .copyright {
            height: 30px;
            background: #125688;

            span {
                color: #fff;
                line-height: 30px;
            }
        }
    }
</style>
